// import React, { Component } from 'react';

// class Index extends Component {

//     initMap = () => {

//         // console.log(window.AMap, 'window.AMap')
//         var map = new window.AMap.Map('map', {
//             viewMode: '3D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D'
//             zoom: 9, // 初始化地图层级
//             center: [116.397428, 39.90923]
//         });
//     }

//     componentDidMount() {
//         setTimeout(() => {
//             this.initMap()
//         }, 1000)

//     }
//     render() {
//         return (
//             <div>
//                 <div style={{ width: '80vw', height: '80vh' }} id="map" ref={node => this.mapContainer = node}></div>
//             </div>
//         );
//     }
// }

// export default Index;

import React, { Component } from 'react';
import AMapLoader from '@amap/amap-jsapi-loader'; class MapComponent extends Component {
    constructor() {
        super();
        this.map = {};
    }

    // dom渲染成功后进行map对象的创建
    componentDidMount() {
        AMapLoader.load({
            key: '2c443039e81420d919a976093de56665', // 申请好的Web端开发者Key，首次调用 load 时必填
            version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            plugins: [''], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        })
            .then(AMap => {
                this.map = new AMap.Map('container', {
                    // 设置地图容器id
                    viewMode: '10', // 是否为3D地图模式
                    zoom: 5, // 初始化地图级别
                    center: [105.602725, 37.076636], // 初始化地图中心点位置
                });
            })
            .catch(e => {
                console.log(e);
            });
    }

    render() {
        // 初始化创建地图容器,div标签作为地图容器，同时为该div指定id属性；
        return <div id="container" style={{ height: '80vh', width: '80vw' }}></div>;
    }
}
// 导出地图组建类
export default MapComponent;